<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        // 定义二维数组:
        var arr = new Array(4);
        arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
        arr[1] = new Array("长春市","吉林市","四平市","通化市");
        arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
        arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
    </script>
    <script>
        //2.编写改变事件对应的函数
        function changePro(obj) {
            // 获取选中的省对应的value值
            let val = obj.value;
            //alert(val);
            //获取选中的省份对应的市数组
            let cityArr = arr[val];
            //遍历市数组,将每一个市拼成 option
            let cityStr = "<option>==请选择==</option>";
            for (let i = 0; i < cityArr.length; i++) {
                cityStr+="<option>"+cityArr[i]+"</option>";
            }
            //alert(cityStr);
            //将拼接好的字符串,设置到市的标签体中
            document.getElementById("city").innerHTML = cityStr;
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <!-- TODO:给省份下拉选添加改变事件 -->
    籍贯:
    <select name="pro" onchange="changePro(this)">
        <option>请选择</option>
        <option value="0">黑龙江</option>
        <option value="1">吉林</option>
        <option value="2">辽宁</option>
        <option value="3">河南</option>
    </select> 省
    <select id="city">
       <!-- <option >-请选择-</option>-->
    </select> 市
</form>
</body>
</html>
